<template>
  <div class="month-nanny-wrapper">
    <div class="search">
      <div class="price">
        <span class="title">价格：</span>
        <el-radio-group v-model="price">
          <el-radio-button label="不限"></el-radio-button>
          <el-radio-button label="6666元"></el-radio-button>
          <el-radio-button label="8888元"></el-radio-button>
          <el-radio-button label="9999元"></el-radio-button>
          <el-radio-button label="11111元"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="age">
        <span class="title">年龄：</span>
        <el-radio-group v-model="age">
          <el-radio-button label="不限"></el-radio-button>
          <el-radio-button label="35岁以下"></el-radio-button>
          <el-radio-button label="36~40岁"></el-radio-button>
          <el-radio-button label="41~45岁"></el-radio-button>
          <el-radio-button label="45岁以上"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="experience">
        <span class="title">经验：</span>
        <el-radio-group v-model="experience">
          <el-radio-button label="不限"></el-radio-button>
          <el-radio-button label="3年以下"></el-radio-button>
          <el-radio-button label="3~5年"></el-radio-button>
          <el-radio-button label="5~8年"></el-radio-button>
          <el-radio-button label="8年以上"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="place">
        <span class="title">籍贯：</span>
        <el-radio-group v-model="place">
          <el-radio-button label="不限"></el-radio-button>
          <el-radio-button label="北京"></el-radio-button>
          <el-radio-button label="河北"></el-radio-button>
          <el-radio-button label="山西"></el-radio-button>
          <el-radio-button label="辽宁"></el-radio-button>
          <el-radio-button label="陕西"></el-radio-button>
          <el-radio-button label="黑龙江"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="month-nanny-content">
      <div class="item" v-for="(item, index) in monthList" :key="index">
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
        <div class="month-name">{{ item.name }}</div>
        <div class="month-desc">{{ item.desc }}</div>
        <router-link to="/monthNanny/monthNannyDetail" class="month-btn"
          >查看详情</router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: "不限",
      age: "不限",
      experience: "不限",
      place: "不限",
      monthList: [
        {
          img: "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC9mMGYxNjRmMTg2Mjc5MmYyOTY4NDdkZjEyZGY0YWExMC0zNTB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          name: "李阿姨",
          desc: "河北人 | 属牛 | 服务家庭超过20户",
        },
        {
          img: "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC84ZjJlYmQ4ZmYyYzY1ZjlhMDNkMWI5NzRiMWViNzE2NS0zNTB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          name: "王阿姨",
          desc: "江苏人 | 属鸡 | 服务家庭超过60户",
        },
        {
          img: "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC8wZWY4MWM0OTcyZTJkNjYyOGYzM2QzNjAxMDg2YjJkMi0zNTB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          name: "张阿姨",
          desc: "北京人 | 属猴 | 服务家庭超过60户",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.month-nanny-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f4f9fc;
  padding: 20px;
  .search {
    width: 1280px;
    background-color: #fff;
    padding: 30px;
    .title {
      margin-right: 30px;
    }
    .price {
    }
    .age {
      margin: 20px 0;
    }
    .place {
      margin-top: 20px;
    }
  }
  .month-nanny-content {
    width: 1340px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      padding-bottom: 30px;
      .month-name {
        font-size: 20px;
        line-height: 22px;
        margin-top: 20px;
      }
      .month-desc {
        font-size: 13px;
        line-height: 16px;
        color: #999999;
        margin: 20px 0;
      }
      .month-btn {
        width: 130px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #e6454a;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
</style>

